<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>鼠鼠我啊，最喜欢看这个了捏</title>
		<link rel="icon" href="http://www.zlhpro.online:8080/pictures/bilibilibog.ico">
		<link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/carousel/">
		<link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.20/dist/css/bootstrap.min.css"
			rel="stylesheet">
		<script src="js/jquery-3.4.1.min.js"></script>
		<script src="js/template-web.js"></script>
		<style type="text/css">
			nav {
				left: 0px;
				top: 0px;
				width: 1920px;
				height: 100px;
				line-height: 20px;
				background-color: rgba(255, 255, 255, 100);
				text-align: center;
			}

			div h2 {
				position: absolute;
				left: 119px;
				top: 136px;
				height: 52px;
				color: rgba(16, 16, 16, 100);
				font-size: 36px;
				text-align: left;
				font-family: SourceHanSansSC-regular;
			}

			div p {
				position: absolute;
				left: 119px;
				top: 197px;
				height: 20px;
				color: rgba(16, 16, 16, 100);
				font-size: 14px;
				text-align: left;
				font-family: SourceHanSansSC-regular;
			}

			video {
				position: absolute;
				/* left: 119px; */
				top: 231px;
				width: 1380px;
				height: 790px;
			}

			#indexicon {
				position: absolute;
				left: 49px;
				top: 2px;
				width: 271px;
				height: 97px;
				z-index: 10;
			}

			.screen-video {
				width: 80%;
				margin: 1rem 10%;
				border: 1px solid white;
				object-fit: fill;
			}

			.screen-input {
				position: absolute;
				left: 10%;

				height: 1.5rem;

				line-height: 1.5rem;
				font-size: 1rem;
			}

			.screen-button {
				position: absolute;
				right: 10%;

				height: 1.5rem;

				line-height: 1.5rem;
				letter-spacing: 0.2em;
				font-size: 1rem;

				cursor: pointer;

				background-color: rgba(40, 124, 221, 86);
				color: #FFFFFF;
			}

			.barrage {
				position: absolute;
				left: 10%;
				width: 80%;
				overflow-x: hidden;
				z-index: 999;
			}

			.barrage-span {
				font-family: "Microsoft YaHei";
				font-size: 1.5rem;
				font-weight: 400;

				text-shadow: rgb(0, 0, 0) 1px 0px 0px,
					rgb(0, 0, 0) 0px 1px 0px,
					rgb(0, 0, 0) -1px 0px 0px,
					rgb(0, 0, 0) 0px -1px 0px;

				white-space: nowrap;
				cursor: pointer;
				position: absolute;
			}

			#nbtn {
				position: absolute;
				right: 76px;
				top: 26px;
				width: 257px;
				height: 56px;
				border-radius: 7px;
				background-color: rgba(40, 124, 221, 86);
				color: rgba(255, 255, 255, 86);
				font-size: 28px;
				text-align: center;
				font-family: Microsoft Yahei;
				border: 1px solid rgba(187, 187, 187, 100);
			}
		</style>
	</head>

	<body>
		<nav>
			<a href="index.html"><img src="http://www.zlhpro.online:8080/pictures/图片@3x.png" id="indexicon" /></a>
			<button id="nbtn">快点登录啊！！</button>
		</nav>
		<div>
			<h2>叔叔我最喜欢这种能赚钱的东西了捏</h2>
			<p>发布于2021.11.02</p>
		</div>
		<div class="screen">
			<!-- 视频本体 -->
			<video id="gouba" class="screen-video" src="" autoplay></video>
			<input type="text" class="screen-input">
			<input type="button" value="发送" class="screen-button" onclick="send()">
		</div>
		<!-- 弹幕父框架 -->
		<div class="barrage"></div>
	</body>

	<script>

	</script>
	<!-- 前置定义js -->
	<script type="text/javascript">
		
		// 0. 测试区
		// websocket_init();

		// var sbsb="我是个傻逼"
		// var init_json_obj = {
		// 	"uuid" : "1",
		// 	"videoid" : "[[${param.mid}]]",
		// 	"userid" : "[[${session.uuid}]]",
		// 	"content" : sbsb,
		// 	"video_time" : ""
		// }
		// //将json对象转化为json字符串发送
		// var init_json_string = JSON.stringify(init_json_obj);
		// console.log(init_json_string);
		// alert("woshigeshabi");



		//1. 初始化内容
		
		//1.1 定义基本变量
		var video = document.querySelector(".screen-video");
		var content = document.querySelector(".screen-input");
		var btn_send = document.querySelector(".screen-button");
		var barrage = document.querySelector(".barrage");

		var doc = document.documentElement;
		var html = document.querySelector("html");

		var str = "0123456789ABCDEF";

		//设置监听
		window.addEventListener("load", init, false);
		window.addEventListener("resize", init, false);
		content.addEventListener("keyup", function(event) {
			var e = event || window.event;
			if (e.which == "13" || e.keyCode == "13") {
				send();
			}
		}, false);

		//1.2 初始化框架本体
		function init() {
			// 字体初始化
			html.style.fontSize = parseInt(doc.clientWidth / 45) + "px";
			if (parseInt(html.style.fontSize) < 12) {
				html.style.fontSize = "12px";
			}
			// console.log(html.style.fontSize);

			//样式初始化 
			video.style.height = parseInt(video.offsetWidth / 16 * 9) + "px";
			content.style.width = parseInt(video.offsetWidth - btn_send.offsetWidth) + "px";
			content.style.top = (video.offsetHeight + video.offsetTop * 2 - 200) + "px";
			btn_send.style.top = (video.offsetHeight + video.offsetTop * 2 - 200) + "px"; 
			barrage.style.top = video.offsetTop + "px";
			barrage.style.height = video.offsetHeight + "px";
		}

		//1.3 定义基本func
		function getRandomNumber(value) {
			return parseInt(Math.random() * value);
		}

		function sleep(n) {
			var start = new Date().getTime();
			while (true) {
				if (new Date().getTime() - start > n) {
					break;
				}
			}
		}
		
		// 捏马，非常没有用的东西，因为各种原因导致需要从url地址栏获取数据
		// 这个是最蠢的方法，直接想办法从地址栏拉出来
		function getQueryVariable(variable)
		{
		       var query = window.location.search.substring(1);
		       var vars = query.split("&");
		       for (var i=0;i<vars.length;i++) {
		               var pair = vars[i].split("=");
		               if(pair[0] == variable){return pair[1];}
		       }
		       return(false);
		}
			
		var mid = getQueryVariable("mid");
		mid++;
		console.log(mid);
		
		// 2. websocket部分
		
		var websocket = null;

		if ('WebSocket' in window) {
			websocket = new WebSocket(" ws://www.zlhpro.online:8080/bilibili/websocket/service");
		} else {
			alert('浏览器不支持显示别人的实时弹幕，你浏览器寄了！！');
		};

		//2.1 基本websocket处理
		websocket.onopen = function() {
			console.log("WebSocket链接成功");
			var init_json_obj = {
				"uuid": "1",
				// "To_videoID": {{mid}} ,
				"To_videoID": mid,
				// "From_userID": {{UUID}},
				"From_userID": "1",
				"content": "",
				"video_time": ""
			};
			//将json对象转化为json字符串发送
			var init_json_string = JSON.stringify(init_json_obj);
			console.log(init_json_string);
			websocket.send(init_json_string);

		};

		websocket.onmessage = function(event) {
			console.log(event.data);
			var webmsg = $.parseJSON(event.data);
			if (webmsg.code == 1) {
				var bar = $.parseJSON(webmsg.data);
				var barnum = bar.length;
				var videourl = webmsg.msg;

				document.getElementById("gouba").setAttribute("src",videourl);

				console.log(bar);
				console.log(barnum);
				console.log(videourl);

				var vtime = document.getElementById("gouba").currentTime;
				
				var index =0;
				
				setInterval(function(){
					let vtime = document.getElementById("gouba").currentTime;
					while(index<barnum){
						if(vtime>bar[index].video_time){
							var ranran = getRandomNumber(100);
							
							
							// 暴风弹幕测试（传统保留节目
							// setInterval(function(){
							setTimeout(function(){
								send_given(bar[index].content);
								console.log(bar[index].content+"我是个勾八"+vtime+"enen"+bar[index].video_time);
							},ranran)
								index++;
							
						}
						else {
							break;
						}
					}
				    console.log(vtime);
				},1000)
				
			} else {
				var temp = $.parseJSON(webmsg.data);
				console.log(temp);
				var sending_msg = temp.content;
				console.log(sending_msg);
				send_given(sending_msg);
			}

		};

		websocket.onclose = function() {
			console.log("WebSocket链接关闭");
		}

		//界面结束前，用这个关闭websocket
		window.onbeforeunload = function() {
			closeWebSocket();
		}

		function closeWebSocket() {
			websocket.close();
		}

		//3. 发送弹幕内容
		function send() {
			//内容删除空格
			var val = trim(content.value);
			var span;
			//弹幕初始位置偏移量
			var offset = 0;
			var id;
			if (val != "") {
				span = document.createElement("span");
				span.innerHTML = val;
				span.className = "barrage-span";
				barrage.appendChild(span);
				span.style.top = getRandomNumber(parseInt(video.offsetHeight - span.offsetHeight)) + "px";
				span.style.left = video.offsetWidth + "px";
				span.style.color = getRandomColor();
				
				span.addEventListener("mouseover", stop, false);
				span.addEventListener("mouseout", scroll, false);
				
				scroll();
				
				var woshigeshabi = document.getElementById("gouba").currentTime;

				//3.1 弹幕内容发送websocket
				var json_obj = {
					"UUID": "2",
					// "To_videoID": [[${param.mid}]],
					"To_videoID": mid,
					// "From_userID": [[${session.UUID}]],
					"From_userID": "1",
					"content": val,
					"video_time": woshigeshabi
				}
				//将json对象转化为json字符串发送
				var json_string = JSON.stringify(json_obj);
				console.log(json_string);
				websocket.send(json_string);
			}
			
			content.value = "";

			function scroll() {

				offset += 2;

				span.style.transform = "translateX(-" + offset + "px)";
				span.style.transition = "transform 0s linear";

				if (offset >= parseInt(video.offsetWidth + span.offsetWidth)) {
					stop();
					barrage.removeChild(span);
				} else {
					id = window.requestAnimationFrame(scroll);
				}
			}

			function stop() {
				window.cancelAnimationFrame(id);
			}

			//去除两端空格
			function trim(s) {
				return s.replace(/(^\s*)|(\s*$)/g, "");
			}

			function getRandomNumber(value) {
				return parseInt(Math.random() * value);
			}

			function getRandomColor() {
				var color = "#";
				var j;
				for (var i = 0; i < 6; i++) {
					j = getRandomNumber(16);
					color += str.substring(j, j + 1);
				}
				return color;
			}
		}

		function send_given(given_string) {
			var val = given_string;
			var span;
			var offset = getRandomNumber(10);
			console.log("goba"+offset);
			var id;
			if (val != "") {
				span = document.createElement("span");
				span.innerHTML = val;
				span.className = "barrage-span";
				barrage.appendChild(span);
				span.style.top = getRandomNumber(parseInt(video.offsetHeight - span.offsetHeight)) + "px";
				span.style.left = video.offsetWidth + "px";
				span.style.color = getRandomColor();

				span.addEventListener("mouseover", stop, false);
				span.addEventListener("mouseout", scroll, false);

				scroll();

			}
			content.value = "";

			function scroll() {
				offset += 2;
				span.style.transform = "translateX(-" + offset + "px)";
				span.style.transition = "transform 0s linear";

				if (offset >= parseInt(video.offsetWidth + span.offsetWidth)) {
					stop();
					barrage.removeChild(span);
				} else {
					id = window.requestAnimationFrame(scroll);
				}
			}

			function stop() {
				window.cancelAnimationFrame(id);
			}

			function getRandomNumber(value) {
				return parseFloat(Math.random() * value);
			}

			function getRandomColor() {
				var color = "#";
				var j;
				for (var i = 0; i < 6; i++) {
					j = getRandomNumber(16);
					color += str.substring(j, j + 1);
				}
				return color;
			}
		}



		$(document).ready(function() {

			$("#nbtn").click(function() {
				window.location.href = "login.html";
			});

		});
	</script>

	<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
		integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
	</script>
	<script>
		window.jQuery || document.write(
			'<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.20/assets/js/vendor/jquery.min.js"><\/script>'
		)
	</script>
	<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.20/dist/js/bootstrap.min.js"></script>
</html>
